<template>
  <div id="home-top">
    <div class="top-container">
      <md-icon name="home_my" class="home_my" @click="showDrawer"></md-icon>
      <div>{{title}}</div>
      <md-icon name="home_news_icon" class="home_news_icon" @click="openMailBox" v-if="unreadMessage?unreadMessage.unread_flag=='0':true"></md-icon>
      <md-icon name="xiaoxitz_icon" class="xiaoxitz_icon" @click="openMailBox" v-if="unreadMessage?unreadMessage.unread_flag=='1':false"></md-icon>
    </div>
    <div class="untreated_trip" v-show="MyAllotNumber!= ''">
      <p @click="goMyAllot">
        <img src="@/assets/imgs/snyc_zf_cw.png" />
        您有{{MyAllotNumber}}个未处理行程
      </p>
    </div>
    <md-tabs class="no-content" :titles="tabs" ref="tab" :default-index="defaultIndex" @change="onTabChange"></md-tabs>
  </div>
</template>

<script>
import '@/assets/svgs/home_my.svg';
import '@/assets/svgs/home_news_icon.svg';
import '@/assets/svgs/xiaoxitz_icon.svg';
import { mapGetters } from 'vuex';
import { Icon, Dialog, Tabs } from 'mand-mobile';
import http from '@/common/http';
import Loading from '@/components/loading';
export default {
  name: 'home-top',
  data() {
    return {
      title: '平安到家',
      MyAllotNumber: '',
      tabs: [],
      defaultIndex: 0
    };
  },
  components: {
    [Icon.name]: Icon,
    [Tabs.name]: Tabs
  },
  created() {
    this.goMyAllotNumber();
    this.$store.dispatch('getUnreadMessageInfo');
  },
  beforeMount() {
    if (this.getIndexInfoData) {
      for (var i in this.getIndexInfoData) {
        this.tabs.push(this.getIndexInfoData[i].name);
      }
      this.getIndexInfoData.forEach((item, index) => {
        if (item.routerName === this.$route.name) {
          this.defaultIndex = index;
          this.$refs.tab.selectTab(this.defaultIndex);
        }
      });
    } else {
      this.$store.dispatch('getIndexInfo').then(() => {
        for (var i in this.getIndexInfoData) {
          this.tabs.push(this.getIndexInfoData[i].name);
        }
        this.getIndexInfoData.forEach((item, index) => {
          if (item.routerName === this.$route.name) {
            this.defaultIndex = index;
            this.$refs.tab.selectTab(this.defaultIndex);
          }
        });
      });
    }
  },
  methods: {
    onTabChange(index, preindex) {
      // switch (index) {
      //     case 0: // 默认首页
      //         this.$router.replace({
      //             name: 'Home'
      //         });
      //         break;
      //     case 1: // 市内用车
      //         this.$router.replace({
      //             name: 'Incity'
      //         })
      //         break;
      //     case 2: // 出租车
      //         this.$router.replace({
      //             name: 'Taxi'
      //         })
      //         break;
      //     default: // 首页
      //         this.$router.replace({
      //             name: 'Home'
      //         })
      // }
      this.$emit('onTabChange', this.tabs[index]);
    },
    goMyAllotNumber() {
      Loading.show();
      http.post('pakj/passenger/getUseDoingOrder').then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          if (res.data.data.length === 1) {
            if (!sessionStorage['orederBack']) {
              sessionStorage['orederBack'] = '1';
              if (res.data.data[0].doing_type === '1') {
                // 城际
                window.location.href = '/orderdetail?orderno=' + res.data.data[0].doing_order_no;
              } else if (res.data.data[0].doing_type === '2') {
                // 出租车
                window.location.href = '/taxi/taxi?orderno=' + res.data.data[0].doing_order_no;
              } else if (res.data.data[0].doing_type === '3') {
                // 市内用车
                window.location.href = '/incity/detail?orderno=' + res.data.data[0].doing_order_no;
              }
            }
          }
          this.MyAllotNumber = res.data.data.length;
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    goMyAllot() {
      this.$router.push({
        name: 'MyAllot'
      });
    },
    openMailBox() {
      this.$router.push({
        name: 'Message'
      });
    },
    showDrawer() {
      this.$emit('showDrawer');
    }
  },
  computed: {
    ...mapGetters(['unreadMessage', 'getIndexInfoData'])
  }
};
</script>

<style lang="stylus">
#home-top {
  p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  .no-content {
    background: rgba(248, 248, 248, 1);

    .md-tab-bar {
      background: transparent;
    }

    .md-tab-content-wrapper {
      height: 0px;
      min-height: 0px;
    }
  }

  .untreated_trip {
    position: absolute;
    top: 170px;
    width: 100%;
    background: rgba(51, 51, 51, 0.6);
    z-index: 99;
  }

  .untreated_trip p {
    text-align: center;
    font-size: 24px;
    color: #fff;
    height: 68px;
    line-height: 68px;
  }

  .untreated_trip p img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    position: relative;
    top: 6px;
  }

  .top-container {
    height: 80px;
    background-color: #F8F8F8;
    display: flex;
    -webkit-display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px 0 30px;

    .home_my {
      width: 28px;
      height: 32px;
    }

    .home_news_icon {
      width: 33px;
      height: 28px;
    }

    .xiaoxitz_icon {
      width: 42px;
      height: 36px;
      margin-right: -10px;
      margin-top: -10px;
    }
  }
}
</style>
